<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/mobile/include/taglib.jsp"%>
<html>
<head>
	<title>最新优惠</title>
	<%@include file="/WEB-INF/views/mobile/include/head.jsp" %>
	<script src="${ctxStatic}/front/js/jquery.image-maps.js" type="text/javascript"></script>
	<script type="text/javascript"> 
	var sid="${merchant.id}";
	var mobile="${mobile}";
	var appId = '${appId}';
	$(document).ready(function() {
		//重写相关元素的大小
		initRichTextSize($("#inputForm"), $("#inputForm").width());
		initArea();
		window.onresize = function() {
			//重写相关元素的大小
			initRichTextSize($("#inputForm"), $("#inputForm").width());
			initArea();
		};
	});
	
	function initArea(){
		//窗口改变后的宽高
		if($(".photos").length > 0){
			$(".photos").each(function(i){
				var photoHeight = $(this).height();
				$("<img/>").attr("src", $(this).find("[ref='imageMaps']").attr("src")).load(function() {
					if(this.width>$(window).width()){ //说明被压缩过
						var scale = $(window).width()/this.width;
						$("#Map"+i+" .href").each(function(k){
							var oldPosition = $(this).attr("old");
							var x = oldPosition.split(",")[0]*scale;
							var y = oldPosition.split(",")[1]*scale;
							var x1 = oldPosition.split(",")[2]*scale;
							var y1 = oldPosition.split(",")[3]*scale;
							var newPosition = x+","+y+","+x1+","+y1;
							$(this).attr("coords",newPosition);
						});
					}
				});
			});
		}
	} 
	function showUrl(url){
		if(url.indexOf("http://")==-1 && url.indexOf("https://")==-1) url = "http://"+url;
		if(url.indexOf("?")==-1) url = url+"?appId="+appId;
		else url = url+"&appId="+appId;
		document.location=url;
	}
	</script>
	<script type="text/javascript"> 
	function iEventGetNavgitionInfo(){
		var result = {
			title:"最新优惠",
		    leftBtn:{ 
		    	type:2,	//0只显示返回,1只显示关闭，2显示返回，关闭
				backFun:""   //返回执行的事件，不带的话由iOS控制。
			}            
		};
		if($global_isAndroid){
			window.control.onJsComplete(JSON.stringify(result));
			return;
		}
		return JSON.stringify(result);
	}
	</script>
</head>
<body data-role="page">
	<div role="main" class="ui-content" style="padding: 0px;">
		<div id="popup" data-role="popup" data-position-to="window" data-overlay-theme="a" data-theme="b" class="ui-content">
		  <p></p>
		</div>
		<form:form id="inputForm">
		<c:forEach items="${concession.photoList}" var="photo" varStatus="vs">
		<div id="imgMap${vs.index }" class="photos" style="width:640px;height:auto;">
			<img src="${ctxShop }/download?filePath=${photo.logoUrl}" name="test" border="0" usemap="#Map${vs.index }" ref='imageMaps' hidefocus="true"/>
			<map name="Map${vs.index }" id="Map${vs.index }">
			<c:forEach items="${photo.hotList}" var="hot">
				<area onfocus="blur(this)" shape="rect" coords="${hot.position }" old="${hot.position }" href="javascript:" onclick="showUrl('${hot.url }')" target="_blank" class="href cursor-pointer"/>
			</c:forEach>
			</map>
		</div>
  		</c:forEach>
		</form:form>
	</div>
</body>
</html>